<template>
	<view>
		<view class="buy flex_center" @click="show = true">
			<image :src="$util.prefix('game/buy_grass_icon.png')" mode="aspectFill"></image>
			<text class="hidden">{{ have_leaf_num }}</text>
			<image :src="$util.prefix('game/buy_add_icon.png')" mode="aspectFill"></image>
		</view>
		
		<u-popup :show="show" @close="show = false" mode="center" bgColor="transparent">
			<view class="buy-modal flex_c" :style="`background: url(${$util.prefix('game/buy_bg.png')}) 0 0 no-repeat;`">
				
				<view class="title flex_center">
					<view class="avatar-border">
						<image :src="level_img" mode="aspectFill"></image>
					</view>
					<view class="text flex_c">
						<view class="top flex_center">
							<text>花费{{ sing_leaf_price }}</text>
							<image src="/static/recharge/gold_coins.png" mode="aspectFill"></image>
							<text>可获得</text>
						</view>
						<view class="bottom">
							赠送1银叶
						</view>
					</view>
				</view>
		
				<view class="content flex_center">
					<view class="cate flex_center">
						<view class="icon flex_r_around" @click="add(-1)">
							<text>-</text>
						</view>
						<view class="text flex_r_around">
							<text>{{ num }}</text>
						</view>
						<view class="icon flex_r_around" @click="add(1)">
							<text>+</text>
						</view>
					</view>
					
					<view class="btn flex_r_around" @click="num = 10">
						<text>10</text>
					</view>
					
					<view class="btn flex_r_around" @click="num = 100">
						<text>100</text>
					</view>
				</view>
		
				<view class="blance flex_center">
					<text>我的</text>
					<image src="/static/recharge/gold_coins.png" mode="aspectFill"></image>
					<text>剩余:{{ balance }} </text>
				</view>
				
				<view class="buy-btn" @click="onBuy">
					<image :src="$util.prefix('game/buy_btn.png')" mode="aspectFill"></image>
				</view>
		
			</view>
		</u-popup>
		
		<wLoading ref="loading"></wLoading>

	</view>
</template>

<script>
	import wLoading from "@/components/w-loading/w-loading.vue";
	export default {
		components: {
			wLoading,
		},
		data() {
			return {
				have_leaf_num: 0,
				
				show: false,
				
				num: 1,
				
				balance: '0',
				
				// 配置id
				level_config_id: 0,
				// 头像框图片
				level_img: '',
				sing_leaf_price: 0,
			}
		},
		
		created() {
			this.getBlance();
		},
		
		methods: {
			
			// 点10 和 100直接变  2025.5.24 运营说的 （胖的）
			add(num){
				
				this.num += num;
				
				if(this.num < 1){
					this.num = 1;
				}
				
				if(this.num > 100){
					this.num = 100;
				}
				
			},
			
			// 获取金币余额
			getBlance() {
				this.$post('/jinbi/getBalance', {}, false).then(res => {
					this.balance = Number(res.data.balance).toFixed(0);
				});
			},
			
			onBuy(){
				this.$refs.loading.open();
				
				if(this.level_config_id == 0){
					this.$refs.loading.close();
					return;
				}
				
				this.$post('/v2.user_level/buyPrizeProperty',{
					level_config_id: this.level_config_id,
					num: this.num,
					price: this.sing_leaf_price,
				},false,(res)=>{
					this.$refs.loading.close();
					if(res.code == 401){
						this.$native.toJinBiRecharge();
					}else {
						this.$util.msg(res.msg);
					}
				}).then(res=>{
					this.$refs.loading.close();
					this.$emit('refresh')
				});
			},
			
			
		}
	}
</script>

<style lang="less" scoped>
	.buy {
		width: 180rpx;
		height: 52rpx;
		background: #FAB15D;
		border-radius: 26rpx;
		position: absolute;
		right: 44rpx;
		top: 152rpx;
		padding: 0 4rpx 0 8rpx;
		
		image {
			width: 44rpx;
			height: 44rpx;
		}
		
		text {
			flex: 1;
			text-align: center;
			font-size: 24rpx;
			color: #893E07;
			font-weight: 600;
		}
	}
	
	.buy-modal {
		width: 100vw;
		height: 462rpx;
		background-size: 100% !important;
		padding-top: 92rpx;
		
		.title {
			.avatar-border {
				width: 88rpx;
				height: 88rpx;
				margin-right: 56rpx;
				image {
					width: 88rpx;
					height: 88rpx;
				}
			}
			
			.text {
				.top {
					text {
						font-weight: 500;
						font-size: 28rpx;
						color: #AA6F2F;
						line-height: 40rpx;
					}
					
					image {
						width: 36rpx;
						height: 35rpx;
						margin: 0 4rpx;
					}
				}
				
				.bottom {
					font-weight: 500;
					font-size: 28rpx;
					color: #AA6F2F;
					line-height: 40rpx;
				}
			}
		}
	
		.content {
			margin: 24rpx 0 20rpx;
			.cate {
				width: 168rpx;
				height: 44rpx;
				background: #F2D7AC;
				border-radius: 22rpx;
				
				.text {
					flex: 1;
					text {
						font-weight: 600;
						font-size: 28rpx;
						color: #AA6F2F;
					}
				}
				
				.icon {
					width: 44rpx;
					height: 44rpx;
					border-radius: 22rpx;
					background: #E5B881;
					border: 4rpx solid #AB7235;
					text {
						font-size: 36rpx;
						line-height: 36rpx;
						font-weight: 600;
						color: #AB7235;
					}
				}
			}
			
			.btn {
				width: 88rpx;
				height: 64rpx;
				background: #FBC072;
				box-shadow: inset 0rpx -6rpx 10rpx 4rpx #FFE8B8;
				border-radius: 24rpx;
				border: 2rpx solid #C59968;
				margin-left: 12rpx;
				
				text {
					font-weight: 600;
					font-size: 28rpx;
					color: #AA6F2F;
				}
			}
		}
	
		.blance {
			image {
				width: 36rpx;
				height: 36rpx;
				margin: 0 8rpx;
			}
			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #E98326;
				line-height: 40rpx;
			}
		}
	
		.buy-btn {
			width: 208rpx;
			height: 72rpx;
			
			image {
				width: 208rpx;
				height: 72rpx;
			}
		}
	
	}
	
</style>
